<template>
	<view class="page-box body_box">
		<view style="margin-top: 20rpx;font-size: 38rpx;font-weight: 900;">{{getName()}} 欢迎你！</view>
		<view class="time-box row-box">
			<view class="drop-box"></view>
			<view>
				<text>{{new Date().getDate() + "/"}}</text>
				{{getTimeStr()}}
			</view>
		</view>
		
		<view class="step-box row-box" @click="gotoFilePage()">
			<view>
				<view class="number-box center-box">1</view>
				<view class="title-box">快速质检</view>
				<view class="font-box">简单几步即可完成手机成色评估</view>
			</view>
			
			<view>
				<view class="number-box">2</view>
				<view class="title-box">精准估价</view>
				<view class="font-box">简单匹配市场行情报价合理高价回收</view>
			</view>
			
			<view>
				<view class="number-box">3</view>
				<view class="title-box">极速提现</view>
				<view class="font-box">极速审核，当面提现，即刻到账</view>
			</view>
		</view>
		
		<view class="pending-box" v-if="roleInfo.role !== canstat.ROLE_COMPANY">
			<view>
				<text class="h2-font">待处理</text>
				<text style="font-size: 26rpx;color: #909399;" v-if="pendingList == null || pendingList.length === 0">(暂无待处理订单)</text>
			</view>
			<view class="list-box">
				<view class="row-box item-box" v-for="(item, key) in pendingList" @click="gotoDetail(item.inquiryOrderId)">
					<view style="width: 65%; font-size: 28rpx;">{{item.modelName}}</view>
					<view class="right-box">{{item.text}}</view>
					<view class="center-box;" style="width: 5%;"><u-icon name="arrow-right"></u-icon></view>
				</view>
			</view>
		</view>
		
		<!-- 店员角色显示 -->
		<view class="xunjia-box" v-if="roleInfo.role !== canstat.ROLE_COMPANY">
			<view class="row-box">
				<view style="width: 80%;">
					<text class="h2-font">询价中</text>
					<text style="font-size: 26rpx;color: #909399;" v-if="inquiryList == null || inquiryList.length === 0">(暂无询价订单)</text>
				</view>
				<view class="center-box">
					<u-button size="mini" plain type="success" text="所有询价" @click="gotoInquiryListPage()"></u-button>
				</view>
			</view>
			
			<!-- 基本信息 -->
			<view class="info-box row-box" @click="gotoDetail(item.id)" v-for="(item, key) in inquiryList">
				<view style="font-size: 28rpx;width: 80%;">{{item.modelName}}</view>
				<view style="width: 15%;text-align: right;" class="center-box">
					<u-count-down :time="getCountdown(item.createTime)" format="mm:ss" @finish="countDownFinish(key)"></u-count-down>
				</view>
				<view class="center-box;" style="width: 5%;"><u-icon name="arrow-right"></u-icon></view>
			</view>
		</view>
		
		<!-- 店长角色显示 -->
		<view class="order-line" v-if="roleInfo.role === canstat.ROLE_STORE || roleInfo.role === canstat.ROLE_COMPANY">
			<view class="row-box">
				<view class="menus_box" @click="gotoOrder">
					<view class="center-box">
						<view class="img-box center-box blue-bg-shadow">
							<image class="icon_img_mini" :src="require('@/static/img/quan_xian/sel_order.png')"></image>
						</view>
					</view>
					<view>回收订单</view>
				</view>
				<view class="menus_box" @click="navigateToOrder('refund')">
					<view class="center-box">
						<view class="img-box center-box orange-bg-shadow">
							<image class="icon_img_mini" :src="require('@/static/img/store/tui-kuan.png')"></image>
						</view>
					</view>
					<view>退单处理</view>
				</view>
				<view class="menus_box" @click="navigateToOrder('difference')">
					<view class="center-box">
						<view class="img-box center-box purple-bg-shadow">
							<image class="icon_img_mini" :src="require('@/static/img/store/cha-yi.png')"></image>
						</view>
					</view>
					<view>差异订单</view>
				</view>
				<view class="menus_box" @click="gotoQuoteSetting()">
					<view class="center-box">
						<view class="img-box center-box dark-blue-bg-shadow">
							<image class="icon_img_mini" :src="require('@/static/img/store/bao-jia.png')"></image>
						</view>
					</view>
					<view>报价设置</view>
				</view>
			</view>
			
			<view class="row-box">
				
				<!-- <view class="menus_box">
					<view class="center-box">
						<view class="img-box center-box purple-bg-shadow">
							<image class="icon_img_mini" :src="require('@/static/img/store/shen-pi.png')"></image>
						</view>
					</view>
					<view>加价审批</view>
				</view> -->
				
				<view class="menus_box" @click="gotoStoreClerk()">
					<view class="center-box">
						<view class="img-box center-box blue-bg-shadow">
							<image class="icon_img_mini" :src="require('@/static/img/quan_xian/bjs.png')"></image>
						</view>
					</view>
					<view>店长/店员</view>
				</view>
				
				<!-- <view class="menus_box">
					<view class="center-box">
						<view class="img-box center-box yellow-bg-shadow">
							<image class="icon_img_mini" :src="require('@/static/img/quan_xian/he_zuo.png')"></image>
						</view>
					</view>
					<view>邀请估价</view>
				</view> -->
				
				<!-- <view class="menus_box">
					<view class="center-box">
						<view class="img-box center-box red-bg-shadow">
							<image class="icon_img_mini" :src="require('@/static/img/quan_xian/red_bao.png')"></image>
						</view>
					</view>
					<view>领红包</view>
				</view> -->
			</view>
		</view>
		
		<view class="send-box" v-if="roleInfo.role !== canstat.ROLE_COMPANY">
			<view class="row-box" @click="gotoOrder">
				<view class="h2-font" style="width: 65%;">门店发货</view>
				<view style="width: 30%;text-align: right;font-size: 26rpx;color: #909399;">去发货</view>
				<view class="center-box;" style="width: 5%;"><u-icon name="arrow-right"></u-icon></view>
			</view>
			
			<view class="row-box">
				<view class="item-box" v-for="(item, key) in sendList" :style="item.style">
					<view style="font-size: 26rpx;">{{item.name}}</view>
					<view>
						<text style="font-size: 30rpx;font-weight: 600;">{{item.num}}</text>
						<text style="font-size: 22rpx;">件</text>
					</view>
					<view class="money-box" v-if="item.money" :style="item.mStyle">￥{{item.money}}</view>
				</view>
			</view>
		</view>
		
		<view v-if="roleInfo.role === canstat.ROLE_COMPANY" style="margin-top: 20rpx;">
			<u-button text="退出登录" @click="logout"></u-button>
		</view>
		
		<view style="width: 100vw;height: 320rpx;"></view>
		
		<view class="foot-box row-box" v-if="roleInfo.role === canstat.ROLE_STORE || roleInfo.role === canstat.ROLE_CLERK">
			<view>
				<u-button type="success" @click="gotoEstimate">三秒估价</u-button>
			</view>
			<view>
				<u-button type="primary" @click="gotoPrecise">精准询价</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMonthAndDay} from "@/utils/dateUtils.js"
	export default {
		data() {
			return {
				canstat: this.$constant,
				//待处理列表
				pendingList: [],
				//询价列表
				inquiryList: [],
				sendList: [
					{name: '待发货', num: 0, money: 0, style: '', mStyle: ''},
					{name: '超时未发货', num: 0, money: 0, style: 'color:#c0c4cc', mStyle: ''},
					{name: '待签收', num: 0, money: 0, style: '', mStyle: ''},
					{name: '签收异常', num: 0, money: 0, style: 'color:#fa3534', mStyle: 'background-color: #fa3534;color: #FFF'}
				],
			}
		},
		props: {
			roleInfo: Object,
		},
		created() {
			this.getInquiringList();
			this.getShopNoHandleOrderList();
			//监听事件
			uni.$on("InquiryOrderFlush", () => {
				this.getInquiringList();
				this.getShopNoHandleOrderList();
			})
			this.getCountInfo();
		},
		methods: {
			gotoFilePage() {
				uni.navigateTo({
					url: "/pages/public/file-video"
				})
			},
			/* 获取统计数据 */
			getCountInfo() {
				this.$request("/appShopApi/order/queryShopSendCountInfo","get").then(res => {
					const count = res.data;
					this.setSendParams(0, count.waitSendCount, count.waitSendAmount);
					this.setSendParams(1, count.timeoutSendCount, count.timeoutSendAmount);
					this.setSendParams(2, count.waitSignForCount, count.waitSignForAmount);
					this.setSendParams(3, count.signForExceptionCount, count.signForExceptionAmount);
				})
			},
			setSendParams(key, num, price) {
				this.sendList[key].num = num ? num : 0;
				this.sendList[key].money = price ? price : 0;
			},
			/* 获取倒计时 */
			getCountdown(time) {
				let now = new Date().getTime(); //当前时间
				let start = new Date(time);
				let end = start.getTime() + (1000 * 60 * 10);
				return end - now;
			},
			// 询价列表页面
			gotoInquiryListPage() {
				uni.navigateTo({
					url: "/pages/store/inquiry/list"
				})
			},
			//获取询价中订单
			getInquiringList() {
				this.$request("/appShopApi/order/queryInquiringList", "get").then(res => {
					this.inquiryList = res.data
				})
			},
			//获取待处理订单
			getShopNoHandleOrderList() {
				this.$request("/appShopApi/order/queryShopNoHandleOrderList", "get").then(res => {
					this.pendingList = res.data;
					this.pendingList.forEach(item => {
						if(item.refundStatus === 1) {
							item.text = "待退单";
						}else {
							if(item.status === 1)
								item.text = "待支付";
							else if(item.status === 2)
								item.text = "待发货";
						}
					})
				})
			},
			// 退出登录
			logout() {
				uni.removeStorage({
					key: this.$constant.API_TOKEN,
					success: () => {
						this.$request("/mobile/logout", "get");
					}
				})
			},
			//公司店员信息
			getName() {
				let company = this.roleInfo.companyName;
				let store = this.roleInfo.storeName ? this.roleInfo.storeName : '';
				let nick = this.roleInfo.nickName ? this.roleInfo.nickName : '';
				return company + " " + store + " " + nick;
			},
			//前往门店/店员页面
			gotoStoreClerk() {
				uni.navigateTo({
					url: "/pages/store/store-clerk"
				})
			},
			//压价设置
			gotoQuoteSetting() {
				uni.navigateTo({
					url: "/pages/store/quote-setting"
				})
			},
			//订单
			navigateToOrder(type) {
				uni.navigateTo({
					url: "/pages/store/order?type=" + type
				})
			},
			//详情
			gotoDetail(id) {
				uni.navigateTo({
					url: "/pages/store/inquiry/details?id=" + id,
				})
			},
			// 倒计时结束事件
			countDownFinish(e) {
				console.log("计时结束");
				this.getInquiringList();
			},
			gotoOrder() {
				this.$emit("toTabbar", 2);
			},
			//精准估价
			gotoPrecise() {
				uni.navigateTo({
					url: "/pages/store/inquiry/precise"
				})
			},
			//三秒估价
			gotoEstimate() {
				uni.navigateTo({
					url: "/pages/store/inquiry/estimate"
				})
			},
			/* 获取时间字符串 */
			getTimeStr() {
				return getMonthAndDay();
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-box {
		background-image: linear-gradient(45deg,#f2f8fc 48%, #dff4fb, #f2f6ec);
		height: 100vh;
	}
	.time-box {
		margin-top: 40rpx;
		font-size: 36rppx;
		padding: 20rpx 0;
		color: #3F536E;
		text {
			font-size: 46rpx;
			font-weight: 900;
		}
	}
	.drop-box {
		background-color: $uni-color-warning;
		width: 18rpx;
		height: 18rpx;
		border-radius: 50%;
		margin-top: 20rpx;
		margin-right: 20rpx;
	}
	.foot-box {
		position: fixed;
		width: 100vw;
		bottom: 180rpx;
		margin-left: -10rpx;
		view {
			width: 45%;
			margin-left: 20rpx;
		}
	}
	.step-box {
		background-color: #FFF;
		padding: 20rpx;
		border-radius: 20rpx;
		text-align: center;
		.number-box {
			background-color: #71d5a1;
			background-image: linear-gradient(#71d5a1, #18b566);
			display: inline-block;
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			font-size: 60rpx;
			font-weight: 900;
			color: #FFF;
		}
		.title-box {
			font-size: 28rpx;
			font-weight: 900;
			margin-top: 10rpx;
		}
		.font-box {
			font-size: 22rpx;
			padding: 20rpx;
			color: #909399;
		}
	}
	.pending-box {
		background-color: #FFF;
		padding: 20rpx;
		border-radius: 20rpx;
		margin-top: 20rpx;
		.right-box {
			width: 30%;
			text-align: right;
			font-size: 24rpx;
			line-height: 46rpx;
		}
		.item-box {
			background-color: #f2f8fc;
			padding: 10rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}
	.order-line{
		background-color: #fff;
		margin-top: 30rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		.menus_box{
			width: 25%;
			text-align: center;
			font-size: 26rpx;
			line-height: 58rpx;
			margin-top: 40rpx;
		}
	}
	.send-box {
		background-color: #fff;
		margin-top: 20rpx;
		padding: 20rpx;
		border-radius: 20rpx;
		.item-box {
			width: 25%;
			text-align: center;
			margin-top: 20rpx;
			.money-box {
				font-size: 18rpx;
				background-color: #f4f4f5;
				color: #606266;
				display: inline-block;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
			}
		}
	}
	.xunjia-box {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		line-height: 60rpx;
		margin-top: 30rpx;
		.info-box {
			background-color: #f2f8fc;
			padding: 10rpx;
			border-radius: 10rpx;
			margin-top: 20rpx;
		}
	}
</style>
